<template>
  <div class="container">
    <el-card>
      <el-form ref="form" :model="query" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="query.keyword"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18" style="text-align:right;">
            <el-button size="small" @click="clear">清除</el-button>
            <el-button size="small" type="primary" @click="getRandomsFn()">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据条数 -->
      <el-alert :title="'数据一共' + totals + '条'" type="info" :closable="false" show-icon style="margin-bottom:10px"></el-alert>

      <template>
        <el-table :data="Randoms" style="width: 100%">
          <el-table-column prop="id" label="编号" width="220"> </el-table-column>
          <el-table-column prop="questionType" label="题型" width="80">
            <template slot-scope="scope">
              <p v-if="scope.row.questionType === '1'">单选</p>
              <p v-else-if="scope.row.questionType === '2'">多选</p>
              <p v-else>简答</p>
            </template>
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号" width="220">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.questionIDs" :key="index">
                <p class="number" @click="preview(item.id)">{{ item.number }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="180"> </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)" width="170"> </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率" width="170"> </el-table-column>
          <el-table-column prop="userName" label="录入人" width="170"> </el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" plain circle @click="removeRandoms(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页功能 -->
      <el-pagination
        style="text-align: right; margin-top: 20px; margin-bottom: 15px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.pagesize"
        layout="prev, pager, next, sizes, jumper"
        background
        :total="totals"
      >
      </el-pagination>
      <!-- 分页功能 end-->
    </el-card>

    <questions-preview :dialogVisible.sync="dialogVisible" @close="dialogVisible = false" :previewArr="questionItem"></questions-preview>
  </div>
</template>

<script>
import questionsPreview from '../components/questions-preview'
import * as question from '../../api/hmmm/questions'

export default {
  data () {
    return {
      questionItem: {},
      dialogVisible: false, // 预览窗口提示信息
      query: { pagesize: 20, page: 1, keyword: '' }, // 表单列表信息
      totals: 0, // 数据总条目
      Randoms: [] // 题组列表数据
    }
  },
  created () {
    this.getRandomsFn()
  },
  methods: {
    // 清除
    clear () {
      // console.log(1)
      this.query.keyword = ''
      this.query.page = 1
      // 重新获取数据
      this.getRandomsFn()
    },

    // 页码变化
    handleSizeChange (val) {
      this.query.pagesize = val
      this.getRandomsFn()
    },

    // 当前页变化
    handleCurrentChange (val) {
      this.query.page = val
      this.getRandomsFn()
    },

    // 预览
    async preview (id) {
      try {
        // 调用接口获取数据
        const { data } = await question.detail({ id })
        // 传递数据
        this.questionItem = data
        // 打开预览弹窗
        this.dialogVisible = true
      } catch (error) {
        this.$message.info('数据未找到')
      }
    },

    // 删除题组
    async removeRandoms (item) {
      const res = await this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (res === 'confirm') {
        const data = await question.removeRandoms(item)
        // console.log(data)
        if (data.status === 200) {
          this.$message.success('删除成功')
        }
        // 更新题组列表
        this.getRandomsFn()
      } else {
        this.$message('取消删除')
      }
    },

    // 获取题组列表方法
    async getRandomsFn () {
      const { data } = await question.randoms(this.query)
      // console.log(data)
      // 接收题组列表数据
      this.Randoms = data.items
      // 接收总条目
      this.totals = data.counts
    }
  },

  components: {
    questionsPreview
  }
}
</script>

<style scoped lang="scss">
.number {
  color: #09f;
  cursor: pointer;
  line-height: 10px;
}
</style>
